<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'datalake'">
    <div fxLayout="row" class="page-container-padding">
        <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
            <sp-split-section
                title="Data Lake Settings"
                subtitle="Truncate and delete persisted data streams"
            >
                <div fxFlex="100" fxLayout="column">
                    <div fxFlex="100" fxLayout="row">
                        <div
                            fxFlex
                            fxLayoutAlign="start center"
                            class="subsection-title"
                        >
                            Existing data lake indices
                        </div>
                        <div fxLayout="row" fxLayoutAlign="end center">
                            <button
                                color="accent"
                                mat-icon-button
                                matTooltip="Refresh"
                                data-cy="refresh-data-lake-measures"
                                (click)="loadAvailableMeasurements()"
                            >
                                <mat-icon>refresh</mat-icon>
                            </button>
                        </div>
                    </div>
                    <table
                        fxFlex="100"
                        mat-table
                        data-cy="datalake-settings"
                        [dataSource]="dataSource"
                        style="width: 100%"
                        matSort
                    >
                        <ng-container matColumnDef="name">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Name
                            </th>
                            <td mat-cell *matCellDef="let configurationEntry">
                                <h4 style="margin-bottom: 0px">
                                    {{ configurationEntry.name }}
                                </h4>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="pipeline">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Related Pipeline
                            </th>
                            <td mat-cell *matCellDef="let configurationEntry">
                                {{ configurationEntry.pipelines }}
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="events">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                # Events
                            </th>
                            <td
                                mat-cell
                                data-cy="datalake-number-of-events"
                                *matCellDef="let configurationEntry"
                            >
                                <mat-spinner
                                    [diameter]="20"
                                    fxLayoutAlign="center"
                                    style="margin: 10px 0 5px 0"
                                    color="accent"
                                    data-cy="datalake-number-of-events-spinner"
                                    *ngIf="configurationEntry.events < 0"
                                    >Loading
                                </mat-spinner>
                                <span *ngIf="configurationEntry.events >= 0">
                                    {{ configurationEntry.events | number }}
                                </span>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="download">
                            <th mat-header-cell *matHeaderCellDef>Download</th>
                            <td mat-cell *matCellDef="let configurationEntry">
                                <div fxLayout="row">
                                    <span
                                        fxFlex
                                        fxFlexOrder="3"
                                        fxLayout="row"
                                        fxLayoutAlign="start center"
                                    >
                                        <button
                                            color="accent"
                                            mat-icon-button
                                            matTooltip="Download data from index"
                                            matTooltipPosition="above"
                                            data-cy="datalake-download-btn"
                                            (click)="
                                                openDownloadDialog(
                                                    configurationEntry.name
                                                )
                                            "
                                        >
                                            <i class="material-icons"
                                                >download</i
                                            >
                                        </button>
                                    </span>
                                </div>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="truncate">
                            <th mat-header-cell *matHeaderCellDef>Truncate</th>
                            <td mat-cell *matCellDef="let configurationEntry">
                                <div fxLayout="row">
                                    <span
                                        fxFlex
                                        fxFlexOrder="3"
                                        fxLayout="row"
                                        fxLayoutAlign="start center"
                                    >
                                        <button
                                            color="accent"
                                            mat-icon-button
                                            matTooltip="Truncate all data from index"
                                            matTooltipPosition="above"
                                            data-cy="datalake-truncate-btn"
                                            (click)="
                                                cleanDatalakeIndex(
                                                    configurationEntry.name
                                                )
                                            "
                                        >
                                            <i class="material-icons"
                                                >local_fire_department</i
                                            >
                                        </button>
                                    </span>
                                </div>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="remove">
                            <th mat-header-cell *matHeaderCellDef>Remove</th>
                            <td mat-cell *matCellDef="let configurationEntry">
                                <div fxLayout="row">
                                    <span
                                        fxFlex
                                        fxFlexOrder="3"
                                        fxLayout="row"
                                        fxLayoutAlign="start center"
                                    >
                                        <button
                                            color="accent"
                                            mat-icon-button
                                            matTooltip="Remove index from database"
                                            data-cy="datalake-delete-btn"
                                            matTooltipPosition="above"
                                            [disabled]="
                                                !configurationEntry.remove
                                            "
                                            (click)="
                                                deleteDatalakeIndex(
                                                    configurationEntry.name
                                                )
                                            "
                                        >
                                            <i class="material-icons">delete</i>
                                        </button>
                                    </span>
                                </div>
                            </td>
                        </ng-container>

                        <tr
                            mat-header-row
                            *matHeaderRowDef="displayedColumns"
                        ></tr>
                        <tr
                            mat-row
                            *matRowDef="let row; columns: displayedColumns"
                        ></tr>
                    </table>
                </div>
                <div fxFlex="100" fxLayoutAlign="end end">
                    <mat-paginator
                        [pageSizeOptions]="[pageSize]"
                        [pageSize]="pageSize"
                        (page)="onPageChange($event)"
                    ></mat-paginator>
                </div>
                <div
                    fxFlex="100"
                    fxLayout="column"
                    fxLayoutAlign="center center"
                    *ngIf="availableMeasurements.length === 0"
                >
                    <h5>(no stored measurements)</h5>
                </div>
            </sp-split-section>
        </div>
    </div>
</sp-basic-nav-tabs>
